<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="search">
			
			<navigator url="../jm-search/jm-search" open-type="navigate" style="display: flex; flex: 1;">
			<view class="search_li">				
			       <view class="search_li_size">	 
			         搜索：县区/镇区/村/养殖场
			       </view>						   
			</view>		
			</navigator> 
			
		</view>
		<!-- 顶部地址栏 -->
		<view class="address">
			<view class="city">
				{{city}}
			</view>
			<view class="hen">-</view>
			<view class="county">{{county}}</view>
			<view class="hen">-</view>
			<view class="town">{{town}}</view>
		</view>

		<!-- 顶部导航栏 -->
		<view class="horizonal-tab">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
				<block v-for="(item,index) in tabBars" :key="index">
					<view class="scroll-tab-item" :class="{'active': tabIndex==index} " @tap="toggleTab(index)">
						{{item.name}}
						<view class="scroll-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view>

		<!-- 内容区 -->
		<view class="content">
			<!-- 滑块视图 -->
			<view class="content_view">
				
				<view class="content_view_head">
				<swiper :current="tabIndex" style="height:1500rpx;" @change="tabChange">
					<!-- current:当前所在滑块的index -->					
					
					<swiper-item v-for="(content,index) in contentList" :key="index">
						
						<view class="content_view_head_left">
							玉州养殖户共计：{{content.farmers}}家
						</view>					
						<navigator url="../village/village" open-type="navigate">
							<view class="content_view_head_right">
								查看详情>>
							</view>						
							
						</navigator>
						<!-- 数据模块 -->
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style="background-color: #83c986;
									  border-radius: 18rpx;"><br/> 存栏 </view>
								      
								      <view class="content_view_central_li_ul_right">
										  <view class="content_view_central_li_ul_right_li">合计:{{content.pig}}头</view>
										  <view class="content_view_central_li_ul_right_li">能繁殖母猪:{{content.Sow}}头</view>
									  </view>
								 </view>								
							</view>							
						</view>
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style="background-color: #d9af90;
									  border-radius: 18rpx;"><br/> 栏舍面积 </view>
								      
								      <view class="content_view_central_li_ul_right_l">
										  <view class="content_view_central_li_ul_right_l_li">总面积:{{content.house}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">高架床</view>
										  <view class="content_view_central_li_ul_right_l_li">数量:{{content.upstairsq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.upstairsa}}亩</view>
									  </view>
									  <view class="content_view_central_li_ul_right_r">
										  <view class="content_view_central_li_ul_right_l_li">传统栏舍:{{content.ohouse}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">低架床</view>
										  <view class="content_view_central_li_ul_right_l_li">数量:{{content.downstairsq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.downstairsa}}亩</view>									  										  
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style="width: 25% ; background-color: #7aafef;
									  border-radius: 18rpx;"><br/> 沼气池 </view>
								      
									  <view class="content_view_central_li_ul_right">
								       <view class="content_view_central_li_ul_right_le">
										 数量:{{content.biogasq}}家
									   </view>
									   <view class="content_view_central_li_ul_right_ri">
										 面积:{{content.biogasa}}亩										  									  										  
									   </view>
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left" style=" background-color: #9f8e61;
									  border-radius: 18rpx;"><br/> 生态化改造 </view>
								      
								      <view class="content_view_central_li_ul_right_l">
										  <view class="content_view_central_li_ul_right_l_li">储液池:数量:{{content.poolq}}家 </view>
										  <view class="content_view_central_li_ul_right_l_li">储粪房:数量:{{content.sfaecesq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">干粪池:{{content.faecespq}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">改水:{{content.water}}家</view>
									  </view>
									  <view class="content_view_central_li_ul_right_r">
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.poola}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">面积:{{content.sfaecesa}}亩</view>
										  <view class="content_view_central_li_ul_right_l_li">使用益生菌:{{content.faecespa}}家</view>
										  <view class="content_view_central_li_ul_right_l_li">完成改造:{{content.waters}}家</view>									  										  
									  </view>
								 </view>								
							</view>							
						</view>
						
						<view class="content_view_central">
							<view class="content_view_central_li">
							     <view class="content_view_central_li_ul">
								      <view class="content_view_central_li_ul_left_p"
								      style="width: 25% ; background-color: #aaaaff;
								      color:#FFFFFF ;border-radius: 18rpx;"><br/> 粪污处理 </view>
								      
									  
								      <view class="content_view_central_li_ul_l">
										  <view class="content_view_central_li_ul_l_li">自有土地消纳</view>
										  <view class="content_view_central_li_ul_l_li">2018年1月至统计当月消纳量:{{content.Own}}吨</view>
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Owna}}家</view>
											  <view>面积:{{content.Ownr}}亩</view>
											  </view>
											  
										  </view>
										   <br/>
										   
										   <view class="partition" style="width: 80%;height: 2rpx; margin: 0 8%;background-color: #646464;"></view>
										  <view class="content_view_central_li_ul_l_li">委托第三方处理</view>
										  <view class="content_view_central_li_ul_l_li">2018年1月至统计当月消纳量:{{content.Others}}吨</view>
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Othersa}}家</view>
											  
											  </view>										  											 
										  </view>
										  <br/>
										  
										  <view class="partition" style="width: 80%;height: 2rpx; margin: 0 8%;background-color: #646464;"></view>
										  <view class="content_view_central_li_ul_l_li" >直排</view>
										  
										  <view class="content_view_central_li_ul_l_li">
											  <view class="content_view_central_li_ul_l_li_">
											  <view>数量:{{content.Other}}家</view>
											 
											  </view>
										  											 										  											 
										  </view>										  
																		
																					
									  </view>
								 </view>								
							</view>							
						</view>
						
					</swiper-item>					
				</swiper>
				</view>
			</view>
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				/* 选中标签栏的序列,默认显示第一个 */
				contentList: [ //养殖户共计多少家
					{
					farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},{farmers:'100',//养殖户共计多少家
					pig:'200',/*总猪*/
						
					Sow:'1200',/*母猪*/
					
					house:'8000',/*,总栏舍面积*/
					ohouse:'2000',/*传统栏舍面积*/
					upstairsq:'50',/*高架床家数*/
					upstairsa:'3000',/*高架床面积*/
					downstairsq:'50',/*低架床家数*/
					downstairsa:'3000',/*低价床面积*/
					
					biogasq:'300',/*沼气池家数*/
					biogasa:'3000',/*沼气池面积*/
					
					poolq:'100',/*储液池家数*/
					poola:'1000',/*储液池面积*/
					sfaecesq:'100',/*储粪房家数*/
					sfaecesa:'1000',/*储粪房面积*/
					faecespq:'200',/*干粪池家数*/
					faecespa:'1500',/*益生菌*/
					water:'98',/*改水家数*/
					waters:'60',/*改水家数*/
					
					Own:'80',/*自己处理*/
					Owna:'3000',/*自己处理家数*/
					Ownr:'3000',/*自己处理面积*/
					Others:'100',/*第三方处理*/
					Othersa:'100',/*第三方处理家数*/
					Other:'20',/*其他处理*/
					},
				],
				city:'玉林',
				county:'东县',
				town:'东镇',
				
				
				
				
				tabBars: [{
						name: '东村',
						id: 'yuzhou'
					},
					{
						name: '南村',
						id: 'fumian'
					},
					{
						name: '西村',
						id: 'beiliu'
					},
					{
						name: '北村',
						id: 'rongxian'
					},
					{
						name: '中村',
						id: 'luchuan'
					},
					{
						name: '發村',
						id: 'bobai'
					},
					{
						name: '白村',
						id: 'xingye'
					}
				]
			}
		},
		methods: {
			//切换选项卡
			toggleTab(index) {
				this.tabIndex = index;
			},
			
			//滑动切换swiper
			tabChange(e) {
				console.log(e);
				this.tabIndex = e.detail.current;
			}
			
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: auto;
	}
	/*搜索模块*/
	.search  {
		display:flex ;
		top: 0;
		left: 0;
		width: 100%;
		height: 88rpx;
		margin: 20rpx auto;
		/* background-color: #007AFF; */
	}
	.search_li{
		flex:5;
		border: 2rpx solid #c3c3c3;
		height: 70rpx;
		border-radius: 10rpx;
		margin: 14rpx 40rpx;
		display:flex ;
		/* background-color: #000000; */
	}
	.search_li_size{
		flex: 3;
		font-size: 40rpx;
	    margin-left: 3%;
		color: #c2c2c2;
		
	}
	.content_view {
		width: 90%;
		height: auto;
		margin: 12rpx 5% 12rpx 5%;
	}
	.content_view_head{
		width: 100%;
		height: auto;
		
	}

	.content_view_head_left {
		width: 70%;
		height: auto;
		font-size: 30rpx;
		float: left;
		
	}

	.content_view_head_right {
		font-size: 30rpx;
		margin: 0 0 0 75%;
		text-align: center;
		border-radius: 10rpx;
		color: #02a7f0;
	}

	.address {
		display:flex ;
		width: 100%;
		height: auto;
		margin: 8rpx 0 0 5%;
	}

	.city {
		font-size: 40rpx;
	}
	.hen{
		font-size: 40rpx;
	}
	.county,.town,.village,.personal{
		font-size: 40rpx;
	}
	.horizonal-tab {}

	.horizonal-tab .active {
		color: #000000;
	}
	
	.scroll-tab {
		white-space: nowrap;
		/* 必要，导航栏才能横向*/
		border-bottom: 1rpx solid #eee;
		text-align: center;
		font-size: 36rpx;
	}
	
	.scroll-tab-item {
		display: inline-block;
		/* 必要，导航栏才能横向*/
		margin: 20rpx 30rpx 0 30rpx;
		color: #ccc;
	}
	
	.active .scroll-tab-line {
		border-bottom: 5rpx solid #0081FF;
		border-top: 5rpx solid #0081FF;
		border-radius: 20rpx;
		width: 100%;
	}
	.content_view_central{
		width: 100%;
		height: auto;
		display:flex ;
		flex-direction: column;
	}
	.content_view_central_li{
		width: 90%;
		height: auto;		
		margin: 20rpx 5%;
		border-radius: 18rpx;
		box-shadow: 10rpx 5rpx 10rpx #dcdcdc;
	}
	.content_view_central_li_ul{
		display:flex ;
		height: auto;
		
	}
	.content_view_central_li_ul_left{
		width: 25% ;
		text-align: center;			
		writing-mode:tb-rl;
		color: #FFFFFF;
		
	}
	.content_view_central_li_ul_central{
		margin: 15rpx 0;
		width: 2rpx;
		height: auto;
		background-color: #646464;
	}
	.content_view_central_li_ul_right{		
		width: 75%;
		text-align: center;
		margin: 20rpx 0;
		display:flex ;
		
	}
	.content_view_central_li_ul_right_li{
		flex: 1;
		margin-top: 24rpx;
		font-size: 27rpx;
	}
	.content_view_central_li_ul_right_l{
		width: 40%;
		justify-items: center;
		
	}
	.content_view_central_li_ul_right_r{
		width: 40%;
		justify-items: center;
		align-items: center;
	}
	.content_view_central_li_ul_right_le{
		width: 50%;
		justify-items: center;
		margin-top: 38rpx;
		font-size: 26rpx;
	}
	.content_view_central_li_ul_left_p{
		writing-mode:tb-rl;
		text-align: center;		
	}
	.content_view_central_li_ul_right_ri{
		width: 50%;
		justify-items: center;
		margin-top: 38rpx;
		font-size: 26rpx;
	}
	.content_view_central_li_ul_right_l_li{
		text-align: center;
		font-size: 27rpx;
	}
	.content_view_central_li_ul_l{
		text-align: center;
	}
	.content_view_central_li_ul_l_li{
		margin: 0 20rpx;
		font-size: 27rpx;
	}
	.content_view_central_li_ul_l_li_>view{
		float: left;
		margin: 0 0 0 10%;
	}
	


</style>
